<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/AmazeUI/assets/js/validator.js"></script>
  <script src="statics/js/plugin/jquery.livequery.js"></script>
  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<div class="am-cf">
  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <div class="am-panel am-panel-default">
        <div class="am-panel-hd am-text-center">找回密码</div>
        <div class="am-panel-bd">
          <form id="passwordRecoverForm" class="validator-form am-form am-form-horizontal" callback="passwordQuestionAjaxSubmit()" action="http://localhost:8080/user/getPasswordQuestion" method="post">
          <div class="am-form-group">
            <label class="am-u-sm-3 am-form-label">用户名</label>
            <div class="am-u-sm-9">
              <input type="text" class="am-form-field first-submit" name="username" placeholder="请填写用户名!" required />
            </div>
          </div>
          <div class="am-form-group">
            <label class="am-u-sm-3 am-form-label">E-mail</label>
            <div class="am-u-sm-9">
              <input type="email" class="am-form-field first-submit" name="email" placeholder="请填写E-mail!" required />
            </div>
          </div>
          <div class="safe-problem am-hide">
          <div class="am-form-group">
            <label class="am-u-sm-3 am-text-right">问题</label>
            <div class="am-u-sm-9" id="problem-content">
            </div>
          </div>
          <div class="am-form-group">
            <label class="am-u-sm-3 am-form-label">答案</label>
            <div class="am-u-sm-9">
              <input type="text" class="am-form-field" id="answer" name="answer" placeholder="请填写密码保护回答！" />
            </div>
          </div>
          </div>
          <div class="am-form-group">
            <div class="am-u-sm-9 am-u-sm-offset-3">
              <input type="hidden" id="question" name="question" value="" />
              <button id="passwordRecoverFormBtn" type="submit" class="am-btn am-btn-default" data-am-loading="{loadingText: '努力校验中...'}">确  定</button>
            </div>
            <div class="am-u-sm-9 am-u-sm-offset-3 am-text-warning am-text-xs">
              如果忘记密码，请填写您的用户名和注册邮箱重新获取密码！
            </div>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
<script type="text/javascript">

$().ready(function() {

});// $().ready(function());

/** '获取密码问题' Ajax提交 **/
function passwordQuestionAjaxSubmit(){

    // 设置'确定'按钮文本为'加载中'
    $("#passwordRecoverFormBtn").button('loading');

    // 进行查找'找回密码-问题'的Ajax表单提交
    $('#passwordRecoverForm').ajaxSubmit({
        dataType: "json",
        success: function(result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                // 重置'提交'按钮
                $("#passwordRecoverFormBtn").button('reset');
                return;
            }

            // 如果返回的数据响应码为200

            // 设置并显示'找回密码-问题'
            $("#problem-content").html(result.data);
            $("#question").val(result.data);

            // 设置'找回密码-回答'为必填
            $("#safeAnswerInput").attr('required','required');

            // 锁定用户名和邮箱为只读
            $(".first-submit").attr('readonly','true');

            // 显示安全问题回答区域
            $(".safe-problem").removeClass("am-hide");

            // '找回密码-回答'获得焦点
            $("#answer").focus();

            // 修改表单回调函数
            $('#passwordRecoverForm').attr('callback', 'passwordRecoverAjaxSubmit()')
            // 修改表单提交url
            $('#passwordRecoverForm').attr('action', 'http://localhost:8080/user/passwordRecover');
            // 重置'提交'按钮
            $("#passwordRecoverFormBtn").button('reset');

        }// success();

    });// $(this).ajaxSubmit();

}// passwordQuestionAjaxSubmit();

/** '重置密码' Ajax提交 **/
function passwordRecoverAjaxSubmit(){

    // 设置'确定'按钮文本为'加载中'
    $("#passwordRecoverFormBtn").button('loading');

    // 进行查找'找回密码-问题'的Ajax表单提交
    $('#passwordRecoverForm').ajaxSubmit({
        dataType: "json",
        success: function(result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                // 重置'提交'按钮
                $("#passwordRecoverFormBtn").button('reset');
                return;
            }

            // 如果返回的数据响应码为200

            // 重置'提交'按钮
            $("#passwordRecoverFormBtn").button('reset');

            let newPassword = result.data;

            Modal.confirm('密码重置成功！<br />您的新密码为<br/><b style="color:red; font-size:24px;">' + newPassword + '</b><br/>请牢记此密码，并尽快登录修改新的密码！', {
                closeViaDimmer: false,
                onConfirm: function() {
                    // 清空session数据
                    sessionStorage.clear();
                    // 跳转到登录页面
                    location.href = 'login.html';
                },
                onCancel: function() {
                    // 清空session数据
                    sessionStorage.clear();
                    // 跳转到登录页面
                    location.href = 'login.html';
                }
            });// Modal.confirm();

        }// success();

    });// $(this).ajaxSubmit();

}// passwordRecoverAjaxSubmit();
</script>
</body>
</html>